<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>注册账号</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: url("img/蓝色粒子.jpg");
    }

    .container {
      position: relative;
      justify-content: center;
      align-items: center;
      width: 550px;
      height: 450px;

      /* border: 1px solid rgb(14, 163, 232); */
      margin: 100px auto;
      text-align: center;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(3px);
    }

    .container h2 {
      position: relative;
      top: 10px;
      /* display: block; */
      padding: 3px;

      /* border: 1px solid gray; */
    }

    .container .p_input {
      display: flex;
      width: 100%;
      height: 40px;
      /* border: 1px solid red; */
      margin: 20px 0;

    }

    .container input {
      display: block;
      position: relative;
      left: 15%;

      width: 65%;
      height: 39px;
      border-radius: 5px;
      text-align: center;

      border: 0.5px solid grey;
    }

    /*   男女 选择框  外div */
    .container .mycheck_input {
      display: flex;
      position: relative;
      left: 15%;
      width: 65%;
      height: 39px;
      border-radius: 5px;
      text-align: center;
      line-height: 39px;
      /* border: 1px solid gray; */
    }

    .container .mycheck_input .mycheck_input1 {
      position: relative;
      width: 49%;
      height: 37px;
      /* border: 1px solid red; */
      text-align: center;
      line-height: 37px;

    }

    .container .mycheck_input #male,
    #female {
      position: relative;
      display: block;
      /* margin: 0; */
      left: 0px;
      width: 30px;
      height: 30px;

      /* border: 1xp solid green; */
    }

    .container .mycheck_input label {
      position: relative;
      top: -36px;
      left: -25px;
    }

    .container span {
      display: block;
      position: relative;
      top: 0;
      right: -15%;
      width: 104px;
      height: 40px;
      line-height: 40px;
      color: red;
      font-size: 12px;
      /* border: 1px solid gray; */
      /* background-color: aqua; */
    }

    .container button {
      position: relative;
      top: 25px;
      left: -2%;
      width: 67%;
      height: 40px;
      background-color: rgb(0, 140, 255);
      border-radius: 10px;
      border: none;
    }

    .container button:hover {
      cursor: pointer;
    }

    .container #tis {
      width: 67%;
      height: 25px;
      /* border: 1px solid red; */
      position: relative;
      /* top: 25px; */
      margin: 40px auto;
      line-height: 25px;
      left: -2%;
      font-size: 14px;
      color: wheat;
    }
  </style>
</head>

<body>
  <!-- 登录 -->
  <div class="container">
    <h2>注册</h2>
    <form action="#" method="post">
      <div class="p_input">
        <input type="text" id="username" defult="123" minlength="2" maxlength="20" placeholder="用户名" />

        <span id="msg_username" class="msg"></span>
      </div>
      <div class="p_input">
        <input type="email" name="ema" id="emal" maxlength="30" placeholder="邮箱" />
        <span id="msg_email" class="msg"></span>
      </div>
      <div class="p_input">
        <input type="tel" name="phone" id="phone" maxlength="11" max="11" placeholder="手机号" />
        <span id="msg_phone" class="msg"></span>
      </div>
      <div class="p_input">
        <input type="password" name="pad" id="password" minlength="6" maxlength="30" placeholder="密码" />

        <span id="msg_password" class="msg"></span>
      </div>
      <div class="mycheck_input">
        <div class="mycheck_input1">
          <input type="checkbox" id="male" name="gender" value="male" onclick="Is_gender(1)" />
          <label for="male">男</label>
        </div>

        <div class="mycheck_input1">
          <input type="checkbox" id="female" name="gender" value="female" onclick="Is_gender(0)" />
          <label for="female">女</label>
        </div>


      </div>

      <button type="button" id="btn_sub">注册</button>
      <p id="tis"></p>
    </form>
  </div>
  <script>
    let user_min_three = false; //  用户名最低要超过3位
    let Is_male = document.getElementById("male") // 男
    let Is_female = document.getElementById("female") // 女
    Is_male.checked = true
    Is_female.checked = false
    let Is_genders = 1   //  0= 女  1=男
    let Is_User = false   // 用户名未注册
    let Is_uphone = false   // 手机号  可使用状态  初始为不可以 false
    let Is_pass = false     // 密码是否符合注册要求 初始为不可以 false

    // 手机判断位数
    phone.onblur = () => {
      tis.innerHTML = ''    // 清空状态值

      let uphone = phone.value

      if (uphone.length != 11 || uphone == "" || uphone == NaN) {
        msg_phone.innerHTML = "手机号11位";
        Is_uphone = false
        return ''
      } else if (!isUphone(uphone)) {
        msg_phone.innerHTML = "无效手机号";
        Is_uphone = false
        return ''
      }
      msg_phone.innerHTML = "手机号有效";
      Is_uphone = true
    }
    //  password 密码判断
    password.onblur = () => {
      tis.innerHTML = ''    // 清空状态值

      let upassword = password.value
      if (upassword.length < 6) {
        msg_password.innerHTML = "密码至少6位"
        Is_pass = false             // 密码是否符合注册要求
        return ''
      } else if (upassword == '123456') {
        msg_password.innerHTML = "密码强度低"
        Is_pass = false
        return ''
      }
      msg_password.innerHTML = "密码符合"
      Is_pass = true
    }
    // ema 邮箱判断
    emal.onblur = () => {
      tis.innerHTML = ''    // 清空状态值
      let uemail = emal.value
      // console.log('isValidEmail(uemail)=', isValidEmail(uemail))
      if (!isValidEmail(uemail)) {
        msg_email.innerHTML = '无效邮箱'
        return ''
      }
      msg_email.innerHTML = '可用邮箱'
    }

    // 用户名 判重
    username.onblur = () => {
      tis.innerHTML = ''    // 清空状态值
      let user_name = username.value;
      // console.log('user_name= ', user_name)
      if (user_name.length < 3) {
        user_min_three = true; // 用户名至少3位
        msg_username.innerHTML = "用户名至少3位";
        // msg_isphone.innerHTML = ''		//  当手机号不为11位时，不提示是否注册过
      } else {
        user_min_three = false; // 用户名至少3位
        msg_username.innerHTML = ""; //  当用户名至少3位时，输入提示取消
        // -----------------------检查是否注册过-----------------------------
        let xhr = new XMLHttpRequest();
        // http://127.0.0.1:3000/v1/user/phone?uphone=12345678911
        let url = `xun?user_name=${user_name}`;
        // console.log(url);
        xhr.open("GET", url);
        xhr.onload = () => {
          let result = xhr.responseText;
          // 将字符串 转成对象 
          result = JSON.parse(result)
          // console.log('result= ', result);
          // console.log(result.code);

          if (result.code == 200) {
            isPhoneZc = true; //  手机号已经注册过
            msg_username.innerHTML = "用户已存在";
            Is_User = true      // 用户名已经注册 更换状态

          } else if (result.code == 500) {
            isPhoneZc = false; //  手机号没有已经注册过
            msg_username.innerHTML = "用户名可注册";
            Is_User = false      // 用户名已经注册 更换状态
          } else {
            msg_username.innerHTML = "用户名异常";
            return ''
          }
        };
        xhr.send();
      }
    };
    //手机号验证
    function isUphone(phone) {
      let regex = /^((13|14|15|17|18|19)\d{9})$/;
      return regex.test(phone)
    }

    //  邮箱验证
    function isValidEmail(email) {
      let msg = false
      let regex_ = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      if (email == '' || email == NaN) {
        msg = false
      } else if (regex_.test(email)) {
        msg = true
      }

      return msg;
    }
    // console.log(isValidEmail("example@example.com")); // 输出 true
    // console.log(isValidEmail("invalid email")); // 输出 false

    // 注册点击
    btn_sub.onclick = () => {
      let user_name = username.value;
      let pass_word = password.value;
      let email = emal.value;
      let uphone = phone.value;
      let ran = 0
      console.log('username=', user_name)
      console.log('password=', pass_word)
      if (Is_genders == 1) {
        ran = Math.floor(Math.random() * (10 + 1));

      } else if (Is_genders == 0) {
        ran = Math.floor(Math.random() * (20 - 10 + 1) + 10)
      } else {
        ran = 0
      }
      if (Is_User) {      // 用户名已经注册 更换状态
        tis.innerHTML = '*用户已存在,请更换用户名注册'

        return ''
      }

      // 判空
      if (user_name == '' || pass_word == '') {
        tis.innerHTML = "*账号密码不能为空"
        return ''
      }
      if (!Is_pass) {
        tis.innerHTML = "*请按要求重新填写密码"
        return ''
      }
      // 不填为0 邮箱
      if (email == "" || email == NaN) {
        email = 0;
      }
      //手机号
      if (!Is_uphone) {
        tis.innerHTML = "*请按要求重新填写手机号";

        return ''
      }
      // console.log('username=', user_name)
      // console.log('password=', pass_word)
      // console.log('email=', email)
      // console.log('phone=', uphone)
      // console.log(ran)
      let xhr = new XMLHttpRequest();
      let url = `zhuc?user_name=${user_name}&email=${email}&uphone=${uphone}&pass_word=${pass_word}&ran=${ran}`;
      // console.log(url)
      xhr.open("POST", url);
      xhr.onload = () => {
        let result = xhr.responseText;
        result = JSON.parse(result)

        if (result.code == 200) {

          location.replace("../index.html")
          /* 将手机信息存进 浏览器缓存*/
          // sessionStorage.setItem("username", `${username}`);
          alert("注册成功");

        } else if (result.code == 400) {
          tis.innerHTML = result.msg
        } else {
          tis.innerHTML = "注册失败，请按要求填写信息";
          // alert('账号密码错误')
          // sum++;
        }
        // console.log('re2', result)
      };
      xhr.send();
    };

    //  获取性别  male female
    function Is_gender(num) {
      if (num == 1) {
        Is_genders = 1            // 选中男复选框
        Is_male.checked = true    // 将男复选框状态确认为 true
        Is_female.checked = false         // 将女复选框状态确认为 false
      } else if (num == 0) {
        Is_genders = 0            // 选中女复选框
        Is_male.checked = false    // 将男复选框状态确认为 false
        Is_female.checked = true         // 将女复选框状态确认为 true
      } else {
        alert("异常，请重新刷新界面")
      }
    }


  </script>
</body>

</html>